<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018-12-10
  Time: 15:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工信息管理</title>
    <jsp:include page="${pageContext.request.contextPath}/common/tag.jsp"/>

</head>
    <script>
        $(function() {
            /*$.post("{pageContext.request.contextPath}/shopcontrllo/query",function (data) {
                $.each(data, function (index, item) {
                    $("#shopid").append("<option value=\""+ item.id+"\">" + item.shopName+"</option>");
                    $("#dian").append("<option value=\""+item.shopId+"\">"+item.shopName+"</option>");
                });
            });
            $.post("{pageContext.request.contextPath}/shopcontrllo/query",function (data) {
                $.each(data, function (index, item) {
                    $("#shopid").append("<option value=\""+ item.id+"\">" + item.shopName+"</option>");
                    $("#shop").append("<option value=\""+item.shopId+"\">"+item.shopName+"</option>");
                });
            });*/
            $('#datetimepicker2').datetimepicker({
                format:'YYYY-MM-DD',
                locale:moment.locale("zh-cn")
            });
            $('#datetimepicker1').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
            $("#table").bootstrapTable({
                url:'${pageContext.request.contextPath}/worker/staffer',
                toolbar : '#add#delete',
                height:500,
                pagination:true,//开启分页
                sidePagination:'server',//服务器分页
                pageSize:4,//页面显示的行数
                pageList:[2,4,8,16],
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        name : $("#sname").val()
                    };
                    return temp;
                },
                columns: [
                    {checkbox:true},
                    {field:'yId',title:'员工编号',align:'center'},
                    {field:'yName',title:'员工姓名',align:'center'},
                    {field:'ySex',title:'性别',align:'center'},
                    {field:'yDate',title:'入职日期',align:'center'},
                    /*{field:'shopName',title:'所属店铺',align:'center'},*/
                    {field:'yPhone',title:'电话',align:'center'},
                    {field:'yAddress',title:'地址',align:'center'},
                    {field:'yEmail',title:'邮箱',align:'center'},
                    {title:'操作',align:'center',
                    formatter: function (value,row,index) {
                        return  "<button class=\"btn btn-primary\" data-toggle=\"modal\" href=\"#edit\" onclick='edit(("+row.yId+"))'><span class=\"glyphicon glyphicon-edit\"></span>修改</button>&nbsp;&nbsp;<button class=\"btn btn-primary\" onclick='shanchu("+row.yId+")'><span class=\"glyphicon glyphicon-trash\"></span>&nbsp;&nbsp 删除</button>";
                    }
                }
            ]
            });
            <!--校验框架-->
            $('#form1').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                   /* validating: 'glyphicon glyphicon-refresh'*/
                },
                fields: {
                    yName: {
                        message: '请输入员工姓名',
                        validators: {
                            notEmpty: {
                                message: '员工姓名不能为空！'
                            }
                        }
                    },
                    yDate:{
                        message:'请输入入职日期',
                        validators:{
                            notEmpty:{
                                message:'入职日期不能为空！'
                            }
                        }
                    },
                    yAffiliated: {
                        message: '类型校验失败',
                        validators: {
                            notEmpty: {
                                message: '商品分类不能为空！'
                            },
                            callback: {
                                message: '必须选择一个类型',
                                callback: function(value, validator) {
                                    if (value == 0) {
                                        return false;
                                    } else {
                                        return true;
                                    }
                                }
                            }
                        }
                    },
                    yPhone:{
                        message:'请输入电话号码',
                        validators:{
                            notEmpty:{
                                message:'电话号码不能为空！'
                            },
                            stringLength: {
                                min: 11,
                                max: 11,
                                message: '请输入11位手机号码'
                            },
                            regexp: {
                                regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                                message: '请输入正确的手机号码'
                            }
                        }
                    },
                    yAddress:{
                        message:'请输入地址',
                        validators:{
                            notEmpty:{
                                message:'地址不能为空！'
                            }
                        }
                    },
                    yEmail: {
                        validators: {
                            notEmpty: {
                                message: '邮箱不能为空'
                            },
                            emailAddress: {
                                message: '输入的不是一个有效的电子邮件地址'
                            }
                        }
                    }
                }
            });
            $('#form2').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    /* validating: 'glyphicon glyphicon-refresh'*/
                },
                fields: {
                    yName: {
                        message: '请输入员工姓名',
                        validators: {
                            notEmpty: {
                                message: '员工姓名不能为空！'
                            }
                        }
                    },
                    yDate:{
                        message:'请输入入职日期',
                        validators:{
                            notEmpty:{
                                message:'入职日期不能为空！'
                            }
                        }
                    },
                    yAffiliated: {
                        message: '类型校验失败',
                        validators: {
                            notEmpty: {
                                message: '商品分类不能为空！'
                            },
                            callback: {
                                message: '必须选择一个类型',
                                callback: function(value, validator) {
                                    if (value == 0) {
                                        return false;
                                    } else {
                                        return true;
                                    }
                                }
                            }
                        }
                    },
                    yPhone:{
                        message:'请输入电话号码',
                        validators:{
                            notEmpty:{
                                message:'电话号码不能为空！'
                            },
                            stringLength: {
                                min: 11,
                                max: 11,
                                message: '请输入11位手机号码'
                            },
                            regexp: {
                                regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                                message: '请输入正确的手机号码'
                            }
                        }
                    },
                    yAddress:{
                        message:'请输入地址',
                        validators:{
                            notEmpty:{
                                message:'地址不能为空！'
                            }
                        }
                    },
                }
            });

            $("#add").click(function () {
                document.getElementById("form1").reset();
                $("#form1").data('bootstrapValidator').resetForm();//清除当前验证的关键之处
            })
        }) ;

        function  sousuo() {
            //返回表格的options
            var options = $("#table").bootstrapTable("getOptions")
            var limit = options.pageSize;
            var offset = (options.pageNumber-1)*limit;
            var yName = $("#yname").val();
            $.post("${pageContext.request.contextPath}/worker/staffer",{'name':yName,'offset':offset,'limit':limit},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#table").bootstrapTable('load',data) ;
            })
        }
    </script>
<body>
<div style="margin:20px 10px;overflow-y: hidden;">
    <form class="form-inline" style="text-align: right;margin-top: 20px;">
        <div class="form-group">
            <label for="yname">员工姓名：</label>&nbsp;
            <input type="text" class="form-control" id="yname" placeholder="请输入用户名" style="">
        </div>
        <button onclick="sousuo();" class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span>搜索</button>
    </form>
    <div>
        <button id="add" type="button" class="btn btn-primary "  data-toggle="modal" href="#addmoda2"><span class="glyphicon glyphicon-plus"></span>添加</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button id="delete" type="button" class="btn btn-primary" onclick="todel()" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;删除</button>
    </div>

    <table id="table"></table>

    <div class="modal fade" id="addmoda2">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">添加员工</h4>
                    </div>
                    <div class="modal-body">
                        <form id="form1" action="" method="post" class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="control-label col-sm-2">用户名:</label>
                                <div class="col-sm-10">
                                    <input type="text" name="yName" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">性别:</label>
                                <div class="col-sm-10">
                                    <input type="radio" name="ySex" id="nan"  value="男" class="radio-inline" checked>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="radio" name="ySex" id="nv" value="女" class="radio-inline">女
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">入职时间:</label>
                                <div class="col-sm-10">
                                    <div class="input-group" id="datetimepicker1">
                                        <input name="yDate" type='text' class="form-control" placeholder="入职时间" />
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <%--<label class="control-label col-sm-2">所属店铺:</label>--%>
                                <div class="col-sm-10">
                                    <input type="hidden" class="form-control" name="yAffiliated" id="shop" value="0">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="phone" class="control-label col-sm-2">所属电话:</label>
                                <div class="col-sm-10">
                                    <input type="text" name="yPhone" id="tele" class="form-control" placeholder="请输入电话"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="address" class="control-label col-sm-2">地址:</label>
                                <div class="col-sm-10">
                                    <input type="text" name="yAddress" class="form-control" placeholder="请输入地址">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="email" class="control-label col-sm-2">邮箱:</label>
                                <div class="col-sm-10">
                                    <input type="text" name="yEmail" id="email" class="form-control" placeholder="请输入电子邮箱">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="toadd()">提交</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
    <!--修改模态框-->
    <div class="modal fade" id="edit">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改员工信息</h4>
                </div>
                <div class="modal-body">
                    <form id="form2"  method="post" class="form-horizontal" role="form">
                        <input type="hidden"  name="yId" id = "id">
                        <div class="form-group">
                            <label class="control-label col-sm-2">员工姓名:</label>
                            <div class="col-sm-10">
                                <input type="text" name="yName" id="name" class="form-control">
                            </div>
                        </div>
                         <div class="form-group">
                        <label class="col-sm-2 control-label">性别:</label>
                        <div class="col-sm-9" id="sex">
                            <div class="radio-inline" id="a">

                            </div>
                            <div class="radio-inline" id="b">

                            </div>
                        </div>
                    </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">入职时间:</label>
                            <div class="col-sm-10">
                                <div class="input-group" id="datetimepicker2">
                                    <input name="yDate" type='text' id="worktime" class="form-control" placeholder="入职时间"/>
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="dian" class="control-label col-sm-2">所属店铺:</label>
                            <div class="col-sm-10">
                            <select class="form-control" name="yAffiliated" id="dian">
                                <option value="0">请选择</option>
                            </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="phone" class="control-label col-sm-2">联系电话:</label>
                            <div class="col-sm-10">
                                <input type="text" id="phone" name="yPhone" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="address" class="control-label col-sm-2">地址:</label>
                            <div class="col-sm-10">
                                <input type="text" id="address"  name="yAddress" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="control-label col-sm-2">邮箱:</label>
                            <div class="col-sm-10">
                                <input type="text" name="yEmail" id="youxiang" class="form-control" placeholder="请输入电子邮箱">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="edits()">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>
</body>
<script>
    //获取修改的值
    function edit(id) {
        /*document.getElementById("form2").reset();//清除表单数据*/

        $("#form2")[0].reset();
        $.post("${pageContext.request.contextPath}/worker/selectByid",{'yid':id},function (data) {
            var shuzu = [];
            $.each(data,function (i) {
                shuzu=data[i];
            });
            console.log(shuzu);
            $("#id").val(shuzu.yId);
            $("#name").val(shuzu.yName);
            var sex =shuzu.ySex;
            if (sex =='男'){
                $("#a").html("<input type=\"radio\" checked=\"checked\" name=\"ySex\" value=\"男\" style=\"margin-top: -1px\"> 男") ;
                $("#b").html("<input type=\"radio\" name=\"ySex\" value=\"女\" style=\"margin-top: 2px\"> 女") ;
            }
            else if (sex =='女'){
                $("#a").html("<input type=\"radio\"  name=\"ySex\" value=\"男\" style=\"margin-top: 2px\"> 男") ;
                $("#b").html("<input type=\"radio\" checked=\"checked\" name=\"ySex\" value=\"女\" style=\"margin-top: -1px\"> 女") ;
            }
            $("#worktime").val(shuzu.yDate);
           $("#dian").val(shuzu.shopid);
           $("#phone").val(shuzu.yPhone);
           $("#address").val(shuzu.yAddress);
           $("#youxiang").val(shuzu.yEmail);
        });
    }
    function  toadd() {
        $("#form1").data("bootstrapValidator").validate();
        var flag = $("#form1").data("bootstrapValidator").isValid() ;
        if(flag){
            var formStr=$("#form1").serialize();
            //处理表单控件的中文乱码
            params = decodeURIComponent(formStr,true);
            //console.log(params);
            $("#addmoda2").modal('hide');
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/worker/add',
                data:params,
                success:function (data) {
                    document.getElementById("form1").reset();
                    $("#form1").data('bootstrapValidator').resetForm();
                    $("#addmoda2").modal('hide');
                    /*从新绑定表格*/
                    $("#table").bootstrapTable('load',data);
                }
            });
        }else{

        }

    }
    function  shanchu(yid) {

        var con = confirm("确定要删除吗?");
        if(con){
            $.post("${pageContext.request.contextPath}/worker/delete",{"yid":yid},function (data) {
                $("#table").bootstrapTable('load',data);
                swal("提示信息","删除成功","success");
            });

        }
    }
    function  edits() {
        $("#form2").data("bootstrapValidator").validate();
        var flag = $("#form2").data("bootstrapValidator").isValid() ;
        var id = $("#id").val();
        if(flag){
            var ftm = $("#form2").serialize();
            params = decodeURIComponent(ftm,true);
            $("#edit").modal('hide');
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/worker/edit',
                data:params,
                success:function (data) {
                    document.getElementById("form1").reset();
                    $("#form2").data('bootstrapValidator').resetForm();
                    $("#edit").modal('hide');
                    /*从新绑定表格*/
                    $("#table").bootstrapTable('load',data);
                }
            });
        }
    }
    //多选删除
    function todel() {
        var ids = "" ;
        //1.得到要删除的行
        //返回所选的行，当没有选择任何行的时候返回一个空数组。
        var rows = $("#table").bootstrapTable("getSelections") ;
        if (rows.length==0){
            swal("提示信息", "请选择要删除的数据!", "error");
        }
        else{
            $.each(rows,function (index,row) {
                ids = ids + row.yId + "-" ;
            }) ;
            swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false,
            }, function () {
                //得到当前页
                //绑定当前页开始
                var options = $("#table").bootstrapTable('getOptions') ;
                //得到当前页
                var pn = options.pageNumber ;
                $.post("/worker/del",{'ids':ids},function(data){
                    //友好的提示
                    swal("删除成功！", "您已经永久删除了这条信息。", "success");
                    //刷新表格
                    $("#table").bootstrapTable('load',data) ;
                })

            });
        }
    }
</script>
</html>